<template>
  <div class="container">
    <div class="menu">
      <div class="menu-item active"><span>推荐</span></div>
      <div class="menu-item"><span>热销</span></div>
      <div class="menu-item"><span>折扣</span></div>
      <div class="menu-item"><span>夏日冰咖必喝榜</span></div>
      <div class="menu-item"><span>进店必喝</span></div>
      <div class="menu-item"><span>只喝美式</span></div>
      <div class="menu-item"><span>酷爽特调水果冰萃</span></div>
      <div class="menu-item"><span>经典奶咖</span></div>
      <div class="menu-item"><span>创意奶咖</span></div>
      <div class="menu-item"><span>瑞纳冰季</span></div>
      <div class="menu-item"><span>不喝咖啡</span></div>
      <div class="menu-item"><span>轻食甜品</span></div>
      <div class="menu-item"><span>热卖套餐</span></div>
    </div>
    <div class="goods-list">
      <div :class=" isActive === true?'goods-item active':'goods-item'" v-for="(item,index) in goods" :key="index">
        <img :src="item.goods.pic" alt="" class="goods-pic" />
        <div class="goods-info">
          <h2 class="goods-title">{{item.goods.title}}</h2>
          <p class="goods-desc" v-html="item.goods.desc">
          </p>
          <p class="goods-sell">
            <span>月售 {{item.goods.sellNumber}}</span>
            <span>好评率{{item.goods.favorRate}}%</span>
          </p>
          <div class="goods-confirm">
            <p class="goods-price">
              <span class="goods-price-unit">￥</span>
              <span>{{item.goods.price}}</span>
            </p>
            <div class="goods-btns">
              <i class="iconfont i-jianhao"></i>
              <span>{{item.choose}}</span>
              <i class="iconfont i-jiajianzujianjiahao"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-car-container">
      <div :class="shopCarShow === true ? 'footer-car active' : 'footer-car'">
        <i class="iconfont i-gouwuchefill"></i>
        <span class="footer-car-badge">{{carShopNum}}</span>
      </div>
      <div class="footer-car-price">
        <span class="footer-car-unit">￥</span>
        <span class="footer-car-total">{{totalPrice}}</span>
      </div>
      <div class="footer-car-tip">配送费￥{{deliveryPrice}}</div>
    </div>
    <div :class="isCrossDeliveryThreshold===true ? 'footer-pay active':'footer-pay'">
      <a href="">去结算</a>
      <span>还差￥{{deliveryPricePoor}}元起送</span>
    </div>
  </div>

  <div class="add-to-car">
    <i class="iconfont i-jiajianzujianjiahao"></i>
  </div>
</template>
 
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { getGoodsApi } from '../server/module/goodsInfo'
import type { goodsDataI } from '../interface/index'

onMounted(() => {
  getGoods()
})

// 购物车

// 单件商品
class UIGoods {
  goods: goodsDataI
  choose: number

  constructor(goods: goodsDataI) {
    this.goods = goods
    this.choose = 0
  }

  // 获取商品总价
  get totalPrice() {
    return parseInt((this.choose * this.goods.price).toFixed(2))
  }

  // 是否选中了此商品
  isChoose() {
    return this.choose > 0
  }

  // 增加选择数量
  increase() {
    this.choose++
  }

  // 减少选择数量
  decrease() {
    if (this.choose <= 0) {
      return
    }
    this.choose--
  }
}

// 整个界面数据
class UIData {
  deliveryThreshold: number  // 起送费
  deliveryPrice: number  // 配送费
  uigoods: Array<UIGoods>

  constructor() {
    this.uigoods = []
    for (let i = 0; i < goodsData.value.length; i++) {
      const uig = new UIGoods(goodsData.value[i])
      this.uigoods.push(uig)
    }
    this.deliveryThreshold = 30
    this.deliveryPrice = 0
  }

  // 获取全部商品总价
  get getTotalPrice(): number {
    let sum: number = 0

    this.uigoods.forEach((item: UIGoods) => {
      sum += item.totalPrice
    })

    return sum
  }

  // 全部的选中数量
  get getTotalChooseNumber(): number {
    let sum = 0
    this.uigoods.forEach((item: UIGoods) => {
      sum += item.choose
    })

    return sum
  }

  // 购物车中是否存在商品
  get hasGoodsInCar(): Boolean {
    return this.getTotalChooseNumber > 0
  }

  // 是否达到配送标准
  get isCrossDeliveryThreshold(): Boolean {
    return this.getTotalPrice >= this.deliveryThreshold
  }

  // 增加某一件商品的选中数量
  increase(index: number) {
    this.uigoods[index].increase()
  }

  // 减少某一件商品的选中数量
  decrease(index: number) {
    this.uigoods[index].decrease()
  }

  // 是否选中
  isChoose(index: number): Boolean {
    return this.uigoods[index].isChoose()
  }

}

// 整个界面
class UI extends UIData {

  constructor() {
    super()
  }

  // 增加商品数量
  increase(index: number): void {
    this.increase(index)
  }

  // 减少商品数量
  decrease(index: number): void {
    this.decrease(index)
  }

  // 更新单个商品的显示状态
  updataGoodsItem(index: number): void {
    if (this.isChoose(index)) {
      isActive.value = true
    } else {
      isActive.value = false
    }
  }

}


let goodsData = ref<Array<goodsDataI>>([])  // 商品数据
let goods = ref<Array<UIGoods>>([])  // 更新后的商品数据
let isActive = ref<Boolean>(false)  // 是否添加选中的样式
let deliveryPrice = ref<number>(0)  // 配送费
let isCrossDeliveryThreshold = ref<Boolean>(false)  // 是否起送
let deliveryPricePoor = ref<number>(0)  // 起送费差距
let totalPrice = ref<number>(0)  // 总价
let shopCarShow = ref<Boolean>(false)  // 购物车有值
let carShopNum = ref<number>(0)  // 购物车商品数量

// 初始化
const init = (goodsData: goodsDataI): void => {
  new UIGoods(goodsData)
  const uiData = new UIData()
  new UI()

  goods.value = uiData.uigoods
  deliveryPrice.value = uiData.deliveryPrice
  isCrossDeliveryThreshold.value = uiData.isCrossDeliveryThreshold
  totalPrice.value = uiData.getTotalPrice

  if (uiData.getTotalPrice - uiData.deliveryThreshold < 0) {
    deliveryPricePoor.value = uiData.deliveryThreshold - uiData.getTotalPrice
  }

  shopCarShow.value = uiData.hasGoodsInCar

  carShopNum.value = uiData.getTotalChooseNumber

}

// 获取购物车中的商品列表数据
const getGoods = async (): Promise<void> => {
  const { data: res } = await getGoodsApi()
  goodsData.value = res
  // 初始化
  init(res)
}

</script>
 
<style lang='scss' scoped>
.iconfont {
  font-size: inherit;
}

.container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 100rem);
  display: flex;
  color: #333;
}

.menu {
  background: #f5f5f5;
  width: 190rem;
  overflow-y: scroll;
  padding-bottom: 50rem;
  flex: 0 0 auto;
}

.menu::-webkit-scrollbar {
  width: 0;
}

.menu-item {
  height: 141rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30rem;
  position: relative;
}

.menu-item span {
  font-size: 30rem;
  line-height: 40rem;
  max-height: 80rem;
  overflow: hidden;
}

.menu-item.active {
  font-weight: bold;
  background: #fff;
}

.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 7.5rem;
  background: #3190e8;
}

.goods-list {
  flex-grow: 1;
  overflow-y: scroll;
}

.goods-list::-webkit-scrollbar {
  width: 0;
}

.goods-item {
  border-bottom: 1rem solid #f8f8f8;
  padding: 30rem 20rem;
  display: flex;
}

.goods-pic {
  width: 200rem;
  height: 200rem;
  object-fit: contain;
  border: 1rem solid rgba(0, 0, 0, 0.06);
  flex: 0 0 auto;
}

.goods-info {
  flex: 1 1 auto;
  padding: 0 35rem;
  overflow: hidden;
}

.goods-title {
  font-size: 35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 20rem;
}

.goods-desc {
  font-size: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20rem;
}

.goods-sell {
  color: #858687;
  font-size: 24rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20rem;
  display: flex;
}

.goods-sell span:first-child {
  margin-right: 18rem;
}

.goods-confirm {
  display: flex;
  justify-content: space-between;
}

.goods-price {
  display: flex;
  font-size: 35rem;
  font-weight: bold;
  color: #f60;
  align-items: flex-end;
}

.goods-price-unit {
  font-size: 25rem;
  margin-bottom: 4rem;
  font-weight: normal;
}

.goods-btns {
  display: flex;
  justify-content: center;
  align-items: center;
}

.goods-btns .iconfont {
  width: 40rem;
  height: 40rem;
  background: #4a90e1;
  color: #fff;
  border-radius: 50%;
  font-size: 23rem;
  line-height: 40rem;
  text-align: center;
}

.goods-btns span {
  margin: 0 15rem;
  display: none;
}

.goods-btns .i-jianhao {
  border: 1rem solid #4a90e1;
  background: #fff;
  color: #4a90e1;
  font-weight: bold;
  display: none;
}

.goods-item.active span {
  display: block;
}

.goods-item.active .i-jianhao {
  display: block;
}

.add-to-car {
  position: fixed;
  color: #fff;
  font-size: 23rem;
  line-height: 40rem;
  text-align: center;
  z-index: 9;
  margin-left: -20rem;
  margin-top: -20rem;
  left: 0;
  top: 0;
}

.add-to-car .iconfont {
  width: 40rem;
  height: 40rem;
  background: #4a90e1;
  border-radius: 50%;
  display: block;
}

.footer {
  height: 100rem;
  color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  z-index: 10;
}

.footer-car-container {
  flex-grow: 1;
  background: #3d3d3f;
  padding-left: 175rem;
  position: relative;
}

.footer-car {
  position: absolute;
  width: 118rem;
  height: 118rem;
  border: 9rem solid #444;
  left: 25rem;
  top: -35rem;
  border-radius: 50%;
  background: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rem;
}

.footer-car-badge {
  position: absolute;
  width: 35rem;
  height: 35rem;
  background: #ec5533;
  font-size: 25rem;
  text-align: center;
  border-radius: 50%;
  line-height: 35rem;
  right: 0;
  top: 0;
  display: none;
}

.footer-car.active {
  background: #4a90e1;
}

.footer-car.active .footer-car-badge {
  display: block;
}

.footer-car.animate {
  animation: footer-car-animate 500ms ease-in-out;
}

@keyframes footer-car-animate {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.footer-car-price {
  font-size: 40rem;
  display: flex;
  margin-top: 5rem;
}

.footer-car-tip {
  font-size: 20rem;
  margin-left: 6rem;
}

.footer-pay {
  background: #535356;
  width: 250rem;
  font-size: 35rem;
  line-height: 100rem;
  text-align: center;
}

.footer-pay>* {
  display: block;
  width: 100%;
  height: 100%;
}

.footer-pay a {
  display: none;
}

.footer-pay span {
  font-size: 30rem;
}

.footer-pay.active {
  background: #76d572;
}

.footer-pay.active a {
  display: block;
}

.footer-pay.active span {
  display: none;
}
</style>